<template>
  <view class="page">
    <map class="map"> </map>
    <view class="detalis">
      <view class="detalis-title">深圳公仔岩水源</view>
      <view class="detalis-address" style="margin-bottom: 18rpx"
        >经度200 - 纬度200 面积180m²</view
      >
      <view class="detalis-address"
        >180m² 广东省深圳市南山区人民路公仔岩180号</view
      >
      <view class="line"></view>
      <view class="content-title">水源信息</view>
      <view class="content"
        >深圳市西丽水库管理处是深圳市水务局直属事业单位，成立于1962年。管
        理处内设三部两所：行政部、技术管理部、水政监察部和西丽管理所、长
        岭皮管理所，现有在编在岗干部职工54人。 供水范围包括南头、宝安、蛇
        口、福田等地，防洪保护范围包括水库下游的平南铁路、广深高速公路、
        北环大道、深南大道和滨河大道等横贯深圳市区的五条主要交通干线以及
        大沙河下游沿线的居民住宅区、高新科技园和风景旅游区等。
      </view>

      <view class="detalis-pics">
        <image
          class="detalis-pic"
          src="https://img2.baidu.com/it/u=840015729,3491529512&fm=253&fmt=auto&app=138&f=JPEG?w=631&h=500"
        ></image>
        <image
          class="detalis-pic"
          src="https://img2.baidu.com/it/u=1316391147,4123903154&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500"
        ></image>
        <image
          class="detalis-pic"
          src="https://img2.baidu.com/it/u=840015729,3491529512&fm=253&fmt=auto&app=138&f=JPEG?w=631&h=500"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    gotoPage(value) {
      uni.navigateTo({
        url: value,
      });
    },
    openDetails() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  position: relative;
}
.map {
  width: 100%;
  height: 249rpx;
}
.detalis {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 28rpx 28rpx 0 0;
  box-sizing: border-box;
  padding: 49rpx 30rpx 0;
  &-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #202020;
    margin: 21rpx 0;
  }
  &-address {
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 42rpx;
  }
  &-pics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  &-pic {
    width: 182rpx;
    height: 182rpx;
    border-radius: 18rpx;
    margin-right: 47rpx;
    margin-bottom: 47rpx;
  }
}
.content-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #202020;
  margin-bottom: 26rpx;
}
.content {
  font-size: 21rpx;
  font-weight: 400;
  color: #202020;
  line-height: 42rpx;
  margin-bottom: 30rpx;
}
.line {
  width: 100%;
  height: 2rpx;
  border: 2rpx dotted #e9e9e9;
  margin-bottom: 25rpx;
}
</style>
